<template>
    <view class="charts-box">
        <qiun-data-charts
            :canvas2d="true"
            type="gauge"
            :opts="opts"
            :chartData="chartOption"
        />
    </view>
</template>

<script>
export default {
    props: {
        chartData: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            chartOption: {},
            //您可以通过修改 config-ucharts.js 文件中下标为 ['gauge'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
            opts: {
                // 只更新数据不重新渲染图表
                update: true,
                duration: 0,
                animation: false,
                color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
                padding: undefined,
                title: {
                    name: "60%",
                    fontSize: 25,
                    color: "#2fc25b",
                    offsetY: 50
                },
                subtitle: {
                    name: "开机率",
                    fontSize: 15,
                    color: "#666666",
                    offsetY: -50
                },
                extra: {
                    gauge: {
                        type: "default",
                        width: 30,
                        labelColor: "#666666",
                        startAngle: 0.75,
                        endAngle: 0.25,
                        startNumber: 0,
                        endNumber: 100,
                        labelFormat: "",
                        splitLine: {
                            fixRadius: 0,
                            splitNumber: 10,
                            width: 30,
                            color: "#FFFFFF",
                            childNumber: 5,
                            childWidth: 12
                        },
                        pointer: {
                            width: 24,
                            color: "auto"
                        }
                    }
                }
            }
        };
    },
    onReady() {
    },
    methods: {
        updateChartData() {
            const num2 = this.chartData.machineCount ? ((this.chartData.machineCount - this.chartData.offLineMachineCount) / this.chartData.machineCount).toFixed(2) : 0;
            let option = {
                categories: [{"value":0.26,"color":"#f04864"},{"value":0.5,"color":"#ff9900"},{"value":0.76,"color":"#1890ff"},{"value":1,"color":"#2fc25b"}],
                series: [
                    {
                        name: "开机率",
                        data: num2
                    }
                ]
            };
            this.opts.title.name = (num2 * 100).toFixed(0) + "%";
            this.chartOption = JSON.parse(JSON.stringify(option));
        }
    },
    watch: {
        chartData: {
            handler() {
                this.updateChartData();
            },
            deep: true
        }
    }
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
    width: 100%;
    height: 100%;
}
</style>
